//页面加载完成
$(function () {
    //    执行事件
    //添加tab栏点击事件
    //点击详情
    $(".tab li").click(function () {
        //给当前点击对象添加选中样式，其它移除选中样式
        $(this).addClass("current").siblings().removeClass("current");
        // $(this).parent().parent().siblings(".container").css('display', 'none')
        $(this).parent().parent().siblings(".weal").css('display', 'block')
        $(this).parent().parent().siblings(".container-2").css('display', 'none')
        $(this).parent().parent().siblings(".tabsbox").css('display', 'none')
        $(this).parent().parent().siblings(".weal").children(".neirong").css('display', 'none')
    });
    //点击天气
    $(".tab .current").click(function () {
        // $(this).parent().parent().siblings(".container").css('display', 'block')
        $(this).parent().parent().siblings(".weal").css('display', 'none')
        $(this).parent().parent().siblings(".container-2").css('display', 'block')
        $(this).parent().parent().siblings(".tabsbox").css('display', 'block')
    })
    //点击卡片
    $(".liactive").click(function () {
        $(this).parent().parent().siblings(".tabscon").children(".conactive").css('display', 'block')
        a="http://api.tianapi.com/tianqi/index?key=7db75f0a8b9e89d93762b622eea1a8f0&city=广州市";
        cit();
    })
        a="http://api.tianapi.com/tianqi/index?key=7db75f0a8b9e89d93762b622eea1a8f0&city=广州市";
        function cit() {
            $.ajax({
        url: a,// 请求路径
        type: "GET", //请求方式
        //请求成功之后的回调
        success: function (data) {
            console.log(data)
            //定义一个变量保存需要拼接的html代码
            var html = "";
            // 遍历数据列表 把每项新闻数据组装成html代码
            $.each(data.newslist, function (index, item) {
                //通过${}把js的变量跟html代码拼接在一起
                html += `
            <div class="card">
                <section class="conactive">
            <div class="left">
                <h1>${item.area}</h1>
                <h2>${item.real}</h2>
                <h3>${item.weather}</h3>
                <h4>${item.week}</h4>
                <h5>${item.date}</h5>
            </div>
                </section>
            </div>
                         `
                $('#result').append(JSON.stringify(data)); //返回内容绑定到id为result的标签
                //   alert('状态码：' + data.code + '\n消息:' + data.msg);

            })

            //最终把新闻列表的内容追加到新闻容器上
            $(".container-2").html(html)
        },//响应成功后的回调函数
        //表示如果请求响应出现错误，会执行的回调函数
        error: function () {
            alert("出错啦...")
        },
        dataType: "json"//设置接受到的响应数据的格式 text 普通的文本字符串

    });
        }
        cit();
   
    $(".dongguang").click(function () {
        $(this).parent().parent().siblings(".tabscon").children(".conactive").css('display', 'none')
        a="http://api.tianapi.com/tianqi/index?key=7db75f0a8b9e89d93762b622eea1a8f0&city=东莞市"  
        cit();
    })
    $(".jieyang").click(function(){
        $(this).parent().parent().siblings(".tabscon").css('display', 'none')
        a="http://api.tianapi.com/tianqi/index?key=7db75f0a8b9e89d93762b622eea1a8f0&city=揭阳市"  
        cit();
    })
})
$(document).ready(function(){
    var inputVal = ($("input[name=findMsg]").val());
      $("#messageSearchBtn").click(function(){
        $(this).parent().siblings(".neirong").css('display','block')
        $("#findMsg").bind('input propertychange', function () {
            $("#findMsg").attr("value", inputVal);
        });
        // alert("输入框的Value值是：" + $("#findMsg").val())
        var a=$("#findMsg").val();
        // alert(a);
      // 创建标签页对象
      new Tab('#tab');
        $.ajax({
          url: "http://api.tianapi.com/tianqi/index?key=7db75f0a8b9e89d93762b622eea1a8f0&city="+a,// 请求路径
          type: "GET", //请求方式
          //请求成功之后的回调
          success: function (data) {
            console.log(data)
            //定义一个变量保存需要拼接的html代码
            var html = "";
            // 遍历数据列表 把每项新闻数据组装成html代码
            $.each(data.newslist, function (index, item) {
              //通过${}把js的变量跟html代码拼接在一起
              html += `
              <div class="neirong">
              <table >
        <tr>
          <td>地区:${item.area}</td>
          <td>日期:${item.date}</td>
          <td>星期:${item.week}</td>
          <td>早晚天气变化:${item.weather}</td>
          <td>实时天气:${item.real}</td>
          </tr>
          <tr> 
          <td>最低温:${item.lowest}</td>
          <td>最高温:${item.highest}</td>
          <td>风向:${item.wind}</td>
          <td>风向角度:${item.winddeg}</td>
          <td>风速:${item.windspeed}</td>
        </tr>
        <tr>
          <td>风力:${item.windsc}</td>
          <td>日出时间:${item.sunrise}</td>
          <td>日落时间:${item.sunset}</td>
          <td>月升时间:${item.moonrise}</td>
          <td>月落时间:${item.moondown}</td>
          </tr>
          <tr>
          <td>降雨量:${item.pcpn}</td>
          <td>降雨概率:${item.pop}</td>
          <td>紫外线强度指数:${item.uv_index}</td>
          <td>能见度:${item.vis}</td>
          <td>相对湿度:${item.humidity}</td>
        </tr>
        </table>
        <div clsass="tips">生活指数提示:<h1>${item.tips}</h1></div>
     
              </div>
                           `
              $('#result').append(JSON.stringify(data)); //返回内容绑定到id为result的标签
              //   alert('状态码：' + data.code + '\n消息:' + data.msg);
  
            })
  
            //最终把新闻列表的内容追加到新闻容器上
            $(".neirong").html(html)
          },//响应成功后的回调函数
          //表示如果请求响应出现错误，会执行的回调函数
          error: function () {
            alert("出错啦...")
          },
          dataType: "json"//设置接受到的响应数据的格式 text 普通的文本字符串
  
        });
       });
  });